import React, { memo, useEffect, useState } from 'react'

import Header from '@/components/header-rcm/header'
import { RankingWrap, ListWrap } from './style'

import { getRankings } from '@/api/discover/recommend'
export default memo(function Ranking() {
    const [rankList, setRankList] = useState([])
    useEffect(() => {
        let rankList2 = []
        Promise.all([getRankings(0), getRankings(1), getRankings(2)]).then(res => {
            console.log(res)
            rankList2 = res.map((item, index) => {
                return item.playlist
            })
            setRankList(rankList2)
        })
    }, [setRankList])
    return (
        <RankingWrap>
            <Header title="榜单" />
            <div className="ranking flex">
                {
                    rankList.map((item, index) => {
                        return <List items={rankList[index]} key={index}></List>
                    })
                }
            </div>
        </RankingWrap>
    )
})

function List(props) {
    const { items = {} } = props
    const tracks = items.tracks ? items.tracks.slice(0, 10) : []
    return (
        <ListWrap className="kind">
            <div className="top">
                <div className="cover ">
                    <img src={items.coverImgUrl + '?param=100y100'} alt="" />
                    <a className="sprite_covor msk" href="#/discover"> </a>
                </div>
                <div className="title">
                    <a href="#/discover" title={items.name}><h3>{ items.name }</h3></a>
                    <div className="icons">
                        <a href="#/discover" className="sprite_02" title="播放"> </a> 
                        <a href="#/discover" className="sprite_02" title="收藏"> </a>
                    </div>
                </div>
            </div>
            <div className="list">
                {
                    tracks.map((item, index) => {
                        return (
                            <div className="item" key={item.id}>
                                <span className={'mark ' + (index < 3 ? 'hot' : '')}>{index + 1}</span>
                                <span className="songName">{item.name}</span>
                            </div>
                        )
                    })
                }
            </div>
            <div className="more">
                <a href="#/discover"> 查看全部{'>'}</a>
            </div>
        </ListWrap>
    )
}